<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文案搜索</title>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link rel="stylesheet" th:href="@{/css/zui.min.css}">
    <style>
        .overflow{
            height: 750px;
            overflow-x: hidden;
            overflow-y: scroll;
        }
        .overflow::-webkit-scrollbar {
            display: none;
        }
        .article-overflow {
            height: 870px;
            overflow-y: scroll;
        }
        .article-overflow::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="panel">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-3" style="padding-right: 0;">
                            <select class="chosen-select form-control" data-bind="value: searchType">
                                <option value="1">关键字</option>
                                <option value="2">标题</option>
                                <option value="3">内容</option>
                            </select>
                        </div>
                        <div class="col-md-9">
                            <div class="input-group">
                                <div class="input-control search-box search-box-circle has-icon-left has-icon-right search-example" id="searchbox">
                                    <input id="inputSearch" type="search" class="form-control search-input" data-bind="attr:{placeholder:placeholder},textInput:searchKey">
                                    <label for="inputSearch" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
                                    <label class="input-control-icon-right" data-bind="click:clearKey"><i class="icon icon-times"></i></label>
                                </div>
                                <span class="input-group-btn">
                                  <button class="btn btn-primary" type="button" data-bind="click:search">搜索</button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="list list-condensed">
                        <div class="items items-hover overflow load-indicator" data-bind="foreach:articleItems">
                            <div class="item">
                                <div class="item-heading">
                                    <h4><a href="javascript:void(0);" data-bind="text:title,click:$parent.fetchDetail,clickBubble:false"></a></h4>
                                </div>
                                <div class="item-content">
                                    <div class="text" data-bind="text:context"></div>
                                </div>
                                <div class="item-footer">
                                    <span class="text-muted" data-bind="text:updateTime"></span>
                                </div>
                            </div>
                        </div>
                        <footer style="text-align: center; padding-right: 0;" data-bind="if: showPager">
                            <ul id="article-pager" class="pager" data-lang="zh_cn"
                                data-elements="prev_icon,page_of_total_text,next_icon,goto"></ul>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8"><div class="panel">
            <div class="panel-heading">
                文章内容
            </div>
            <div class="panel-body article-overflow">
                <article class="article" data-bind="with: detail">
                    <header>
                        <h1 class="text-center" data-bind="text: title"></h1>
                        <dl class="dl-inline" data-bind="visible: updateTime != null">
                            <dt>最后修订：</dt>
                            <dd data-bind="text: updateTime"></dd>
                        </dl>
                    </header>
                    <section class="content" data-bind="html: context">
                    </section>
                </article>
            </div>
        </div></div>
    </div>
</div>
<!-- ZUI Javascript 依赖 jQuery -->
<script th:src="@{/lib/jquery/jquery.js}"></script>
<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
<script th:src="@{/js/zui.min.js}"></script>
<script th:src="@{/js/knockout-3.5.1.js}"></script>
<script th:src="@{/js/search.js}"></script>
</body>
</html>